#@cmsLayout()

#define cmsContent()
<div class="cms-breadcrumb">
	<i class="layui-icon layui-icon-flag"></i>
	<span class="layui-breadcrumb">
	  	<a href="">文章管理</a>
	  	<a><cite>编辑图文</cite></a>
	</span>
</div>

<div class="body-card layui-card">
	<form id="updatePicArt" class="layui-form layui-form-pane" action="#(ctx)/cmsArt/updateArt" method="post" onsubmit="return false;">
  		<input class="layui-hide" type="text" name="id" value="#(art.id)">
  		<div class="layui-form-item">
    		<label class="layui-form-label">标题</label>
    		<div class="layui-input-inline">
      			<input type="text" name="title" value="#(art.title)" placeholder="请输入文章标题" class="layui-input">
    		</div>
    		<div class="layui-form-mid layui-word-aux"><span class="color-warn">*</span></div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">摘要</label>
    		<div class="layui-input-block">
      			<input type="text" name="subtitle" value="#(art.subtitle)" placeholder="请输入文章摘要" class="layui-input">
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">栏目</label>
    		<div class="layui-input-inline">
      			<select name="column">
      				<option value="0">请选择文章所属栏目</option>###这个必须得有，不然页面显示会乱
				  	#for(x : artColumnsMap)
				  	<optgroup label="#(x.key)">
				  		#for(l : x.value)
				  		<option value="#(l.id)" #if(l.id==art.column) selected #end>#(l.name)</option>
				  		#end
				  	</optgroup>
				  	#end
				</select>
    		</div>
    		<div class="layui-form-mid layui-word-aux"><span class="color-warn">*</span></div>
  		</div>
  		<div class="layui-form-item layui-form-text">
  			<label class="layui-form-label">文章内容</label>
  			<div class="layui-input-block">
  				<textarea name="contentText" placeholder="请输入文章内容" class="layui-textarea">#(art.contentText)</textarea>
  			</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">是否置顶</label>
    		<div class="layui-input-inline">
      			<select name="isTop">
      				<option value="0" #if(art.isTop=='0') selected #end>否</option>
      				<option value="1" #if(art.isTop=='1') selected #end>是</option>
				</select>
    		</div>
  		</div>
  		<div id="thumbnail-item" class="layui-form-item #if(!thb) layui-hide #end" pane>###已经上传的缩略图
    		<label class="layui-form-label">已传缩略图</label>
    		<div id="thumbnail-input" class="layui-input-block">
    			#if(thb)
    			<input type='checkbox' name='thumbnail' value='#(thb.id)' title='#(thb.originalName)' checked>
    			<a href="javascript:;" onclick="viewImg('#(thb.id)')" class='layui-btn layui-btn-sm'>预览</a>
    			#end
    		</div>
  		</div>
  		<div class="layui-form-item" pane>
    		<label class="layui-form-label">缩略图</label>
    		<div class="layui-input-inline">
      			<button type="button" class="layui-btn layui-btn-normal" id="thumbnail">传缩略图</button>
    		</div>
    		<div class="layui-form-mid layui-word-aux">每篇文章最多只能有一张缩略图，多次上传将以最后一张为准</div>
  		</div>
  		<div id="files-item" class="layui-form-item #if(files.size()<=0) layui-hide #end" pane>###已经上传的附件
    		<label class="layui-form-label">已传图片</label>
    		<div id="files-input" class="layui-input-block">
    			#for(f : files)
    			<input type='checkbox' name='files' value='#(f.id)' title='#(f.originalName)' checked>
    			<a href="javascript:;" onclick="viewImg('#(f.id)')" class='layui-btn layui-btn-sm'>预览</a>
    			#end
    		</div>
  		</div>
  		<div class="layui-form-item" pane>
    		<label class="layui-form-label">图片</label>
    		<div class="layui-input-inline">
      			<button type="button" class="layui-btn layui-btn-normal" id="uploadPic">上传图片</button>
    		</div>
    		<div class="layui-form-mid layui-word-aux">支持多张图片同时上传</div>
  		</div>
  		<div class="layui-form-item">
    		<div class="layui-input-block">
      			<button class="layui-btn" onclick="ajaxSaveForm('#updatePicArt')">立即提交</button>
      			<a class="layui-btn layui-btn-primary" href="javascript:history.go(-1);">返回</a>
    		</div>
  		</div>
  	</form>
</div>

#@jsInit()

###文件上传
<script>
	var upload = layui.upload;
	//缩略图上传处理
	upload.render({
	    elem: '#thumbnail', //绑定元素
	    url: '/file/upload', //上传接口
	    data: {type: 'thumbnail'},//其他额外参数，此处是缩略图
	    accept: 'images', //接受上传的类型
	    acceptMime: 'image/*', //只显示图片文件
	    exts: 'jpg|png|gif|bmp|jpeg', //允许的文件扩展名
	    size: #(site.fileMaxSize.toInt()*1024), //允许的大小，单位KB，使用siteInfo中的变量
	    done: function(res, index, upload){//上传接口请求成功的回调
	    	if('ok'==res.state){//后台返回成功
	    		layer.msg(res.msg);
	    		$("#thumbnail-item").removeClass("layui-hide");
	    		var html = "<input type='checkbox' name='thumbnail' value='"+res.fileId+"' title='"+res.fileName+"' checked>";
	    		html = html + "<a href='javascript:;' onclick='viewImg("+res.fileId+")' class='layui-btn layui-btn-sm'>预览</a>";
	    		$("#thumbnail-input").html(html);
	    		form.render("checkbox");
	    	} else {//后台返回失败
	    		layer.msg(res.msg);
	    	}
	    },
	    error: function(index, upload){//上传请求失败的回调
	    	layer.msg("文件上传失败");
	    }
	});
	
	//图片上传处理
	upload.render({
	    elem: '#uploadPic', //绑定元素
	    url: '/file/upload', //上传接口
	    data: {type: 'artPic'},//其他额外参数，此处是文章图片
	    accept: 'images', //接受上传的类型
	    size: #(site.fileMaxSize.toInt()*1024), //允许的大小，单位KB，使用siteInfo中的变量
	    multiple: true,
	    done: function(res, index, upload){//上传接口请求成功的回调
	    	if('ok'==res.state){//后台返回成功
	    		layer.msg(res.msg);
	    		$("#files-item").removeClass("layui-hide");
    			$("#files-input").append("<input type='checkbox' name='files' value='"+res.fileId+"' title='"+res.fileName+"' checked>");
	    		$("#files-input").append("<a href='javascript:;' onclick='viewImg("+res.fileId+")' class='layui-btn layui-btn-sm'>预览</a>");
    			form.render("checkbox");
	    	} else {//后台返回失败
	    		layer.msg(res.msg);
	    	}
	    },
	    error: function(index, upload){//上传请求失败的回调
	    	layer.msg("文件上传失败");
	    }
	});
</script>

#end